<template>
	<view>
		<l-down-select ref="lDownSelectRef" :menu="type!=0?menuList:menuList2" bgColor="#f00" :isCloseMask="true">
			<template #slot1>
				<view style="width: 100%;background-color:#fff">
					<scroll-view scroll-y="true" style="height: 100rpx;">
						<view style="padding: 20rpx;display: flex;align-items: center;gap:20rpx">
							<l-checkbox v-for="item in typeList" :key="item.value"
								@update:modalValue="item.checked = $event" :modalValue="item.checked"
								:textAfter="item.label"></l-checkbox>
						</view>
					</scroll-view>
					<view style="display: flex;justify-content: space-around;padding:0 20rpx 20rpx 20rpx ;">
						<button :size="size"  type="default"  class="cus_button" @click="handleTypeListOk">确定</button>
					</view>
				</view>
			</template>
			<template #slot2>
				<view style="width: 100%;background-color:#fff">
					<scroll-view scroll-y="true" style="height: 130rpx;">
						<view style="padding: 20rpx;display: flex;align-items: center;gap:20rpx">
							<l-checkbox v-for="item in mlist" :key="item.value"
								@update:modalValue="item.checked = $event" :modalValue="item.checked"
								:textAfter="item.label" @change="checkboxChange($event,item)"></l-checkbox>
						
						</view>
					</scroll-view>
					<view style="display: flex;justify-content: space-around;padding:0 20rpx 20rpx 20rpx ;">
						<button :size="size" type="error" @click="handleDelete" v-if="type=='2'">删除</button>
						<button :size="size" @click="checkedAll">{{isCheckedAll?"取消全选":'全选'}}</button>
						<button :size="size"  type="default"  class="cus_button" @click="handleOk">确定</button>
					</view>
				</view>
			</template>
		</l-down-select>
	</view>
</template>

<script>
	import {
		debounce
	} from '@/utils/util.js'
	import {
		actionTypeList
	} from '../useSchedule.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			type: {
				type: [String, Number],
				default: '0'
			},
			size: {
				type: String,
				default: 'mini'
			},
			actionType: {
				type: [String, Number],
				default: '0'
			},
		},
		data() {
			this.checkedAll = debounce(this.checkedAll, 500, false)
			return {
				mlist: [],
				isCheckedAll: false,
				typeList: actionTypeList,
				menuList: [{
						text: '类型',
						type: 'slot1',
					},
					{
						text: '人员',
						type: 'slot2',
					},
				],
				menuList2: [{
					text: '类型',
					type: 'slot1',
				}],
			}
		},
		watch: {
			list: {
				handler: function(newVal) {
					console.log("list", newVal)
					let newList = newVal
					newList.forEach(item => {
						item.checked = true
					})
					this.mlist = newList
					this.setIsCheckedAll()
				},
				immediate: true
			},
			actionType: {
				handler: function(newVal) {
					console.log("actionType", newVal)
					if (newVal) {
						const checkeds = newVal.split(',')
						this.typeList = this.typeList.map(item => {
							return {
								...item,
								checked: checkeds.includes(item.value)
							}
						})
					}
				},
				immediate: true
			},
		},
		methods: {
			handleOk() {
				const checkedListValue = this.mlist.filter(item => !!item.checked).map(item => item.value).join(",")
				this.$emit("success", checkedListValue)
				this.$refs.lDownSelectRef.close();
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e, reocrd) {
				console.log("checkboxChange", e);
				reocrd.checked = e.value
				this.setIsCheckedAll()
			},
			// 全选
			checkedAll() {
				this.mlist = this.mlist.map(val => {
					val.checked = this.isCheckedAll ? false : true;
					return val
				})
				this.setIsCheckedAll()
			},
			setIsCheckedAll() {
				this.isCheckedAll = this.mlist.every(item => {
					return item.checked === true
				})

				console.log("this.isCheckedAll", this.isCheckedAll, this.mlist)
			},
			handleDelete() {
				const checkedListValue = this.mlist.filter(item => !!item.checked).map(item => item.id).join(",")
				this.$emit("delete", checkedListValue)
			},
			handleTypeListOk() {
				const checkedListValue = this.typeList.filter(item => !!item.checked).map(item => item.value).join(",")
				this.$emit("handleActionType", checkedListValue)
				this.$refs.lDownSelectRef.close();
			},
		}
	}
</script>